import React, { useState,useEffect } from "react";
import { Toast, ProductCard, NavBar } from "react-vant";
import { Button, Modal, Checkbox, Form, Input } from "antd";
import axios from "axios";
type Props = {};

const add = (props: Props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const data = [
    {
      name: "阿萨德",
      numbe: "11111",
      phone: "22222",
    },
    {
      name: "阿萨德2",
      numbe: "11111",
      phone: "22222",
    },
  ];
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values: any) => {
    console.log("Success:", values);
    let ADData = window.localStorage.getItem("data");
    console.log(ADData);

    let Aadvert = {
      name: values.name,
      numbe: values.numbe,
      phone: values.phone,
      // parent_id: ADData,
    };
    axios.post("http://localhost:4000/Addtict", Aadvert).then((res) => {
      console.log(res);
    });
  };

  

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  useEffect(()=>{
  },[])
  return (
    <div>
      <div>
        <NavBar
          title="乘客列表"
          rightText="按钮"
          onClickLeft={() => Toast("返回")}
        />
      </div>
      <div></div>

      <div className="zon">
        {data.map((item:any, index) => {
          return (
            <ProductCard
              key={index}
              num="2"
              price={item.phone}
              desc={item.numbe}
              title={item.name}
            />
          );
        })}
      </div>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="证件号码"
            name="numbe"
            rules={[{ required: true, message: "Please input your numbe!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="手机号"
            name="phone"
            rules={[{ required: true, message: "Please input your phone!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Button>确定</Button>
    </div>
  );
};

export default add;
